<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .selected{
            background-color: #ffee99;
        }
    </style>

    <script>
        var obj;
        onload=function(){
            obj=document.getElementById("i3");
        }



        function f1(){
            var obj=document.getElementById("a1");

            console.log(obj);

            //innerHTML:表示节点之间的内容

            console.log(obj.innerHTML);

            obj.innerHTML="<h1>click</h1>";
        }


        function fn(obj){
            obj.className="selected";
        }

        function view(){
            var obj=document.getElementById("u1");

            var arr=obj.childNodes;

            console.log(arr);

            // for (var i = 0; i < arr.length; i++) {
            //     arr[i].className="selected";
            // }

            arr.forEach(function(item){
                item.className="selected";
            });
        }

        function view2(){
            // var arr=document.getElementsByTagName("li");

            var obj=document.getElementById("u1");

            var arr=obj.getElementsByTagName("li");


            for (var i = 0; i < arr.length; i++) {
                arr[i].className="selected";
            }
        }

    </script>

</head>
<body>
    <a id="a1" href="javascript:;" onclick="f1();"><h1>test</h1></a>

    <a href="javascript:;"  onclick="fn(obj);">当前节点</a>
    <a href="javascript:;"  onclick="fn(obj.parentNode);">父节点</a>
    <a href="javascript:;"  onclick="fn(obj.previousSibling.previousSibling);">上一个节点</a>
    <a href="javascript:;"  onclick="fn(obj.nextSibling.nextSibling);">下一个节点</a>
    <a href="javascript:;"  onclick="fn(obj.parentNode.firstChild.nextSibling);">第一个节点</a>
    <a href="javascript:;"  onclick="fn(obj.parentNode.lastChild.previousSibling);">最后一个节点</a>
    <a href="javascript:;"  onclick="view();">所有节点</a>
    <a href="javascript:;"  onclick="view2();">所有节点</a>
    <ul id="u1">
        <li>item1</li>
        <li>item2</li>
        <li id="i3">item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>

    <li>item6</li>

<!--    <script>-->
<!--        var obj=document.getElementById("i3");-->
<!--    </script>-->

</body>
</html>